<template>
  <div class="message-container">
    <!-- 标题区域 -->
    <div class="message-header">
      <div class="header-left">
        <h1 class="page-title">消息中心</h1>
        <p class="page-subtitle">管理系统消息和通知</p>
      </div>
      <div class="header-right">
        <el-button-group>
          <el-button icon="el-icon-delete" @click="batchDeleteMessages">批量删除</el-button>
          <el-button type="primary" icon="el-icon-refresh" @click="refreshMessages">刷新</el-button>
        </el-button-group>
      </div>
    </div>
    
    <!-- 消息管理区域 -->
    <div class="message-main">
      <el-row :gutter="20">
        <!-- 左侧导航 -->
        <el-col :xs="24" :md="6">
          <div class="message-sidebar">
            <!-- 消息统计 -->
            <div class="message-stats">
              <div class="stat-item">
                <div class="stat-number">{{ unreadCount }}</div>
                <div class="stat-label">未读消息</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">{{ totalCount }}</div>
                <div class="stat-label">全部消息</div>
              </div>
            </div>
            
            <!-- 消息分类 -->
            <div class="message-categories">
              <h3 class="sidebar-title">消息分类</h3>
              <el-menu 
                :default-active="activeCategory" 
                class="category-menu"
                @select="handleCategorySelect"
              >
                <el-menu-item index="all">
                  <i class="el-icon-message"></i>
                  <span>全部消息</span>
                  <span class="message-count">{{ totalCount }}</span>
                </el-menu-item>
                <el-menu-item index="system">
                  <i class="el-icon-bell"></i>
                  <span>系统通知</span>
                  <span class="message-count">{{ systemCount }}</span>
                </el-menu-item>
                <el-menu-item index="task">
                  <i class="el-icon-s-order"></i>
                  <span>任务提醒</span>
                  <span class="message-count">{{ taskCount }}</span>
                </el-menu-item>
                <el-menu-item index="personal">
                  <i class="el-icon-chat-dot-round"></i>
                  <span>个人消息</span>
                  <span class="message-count">{{ personalCount }}</span>
                </el-menu-item>
                <el-menu-item index="announcement">
                  <i class="el-icon-document"></i>
                  <span>公告</span>
                  <span class="message-count">{{ announcementCount }}</span>
                </el-menu-item>
              </el-menu>
            </div>
            
            <!-- 消息设置 -->
            <div class="message-settings">
              <h3 class="sidebar-title">消息设置</h3>
              <div class="setting-item">
                <span>接收系统通知</span>
                <el-switch v-model="settings.receiveSystem" />
              </div>
              <div class="setting-item">
                <span>接收任务提醒</span>
                <el-switch v-model="settings.receiveTask" />
              </div>
              <div class="setting-item">
                <span>接收个人消息</span>
                <el-switch v-model="settings.receivePersonal" />
              </div>
              <div class="setting-item">
                <span>接收公告</span>
                <el-switch v-model="settings.receiveAnnouncement" />
              </div>
              <div class="setting-item">
                <span>推送桌面通知</span>
                <el-switch v-model="settings.desktopNotification" />
              </div>
              <div class="setting-item">
                <span>邮件通知</span>
                <el-switch v-model="settings.emailNotification" />
              </div>
              <el-button type="primary" block @click="saveSettings">保存设置</el-button>
            </div>
          </div>
        </el-col>
        
        <!-- 右侧内容 -->
        <el-col :xs="24" :md="18">
          <!-- 消息筛选 -->
          <div class="message-filter">
            <div class="filter-left">
              <el-checkbox v-model="selectAll" @change="handleSelectAllChange">全选</el-checkbox>
              <el-button size="small" @click="markAsRead" :disabled="!hasSelected">标记为已读</el-button>
              <el-button size="small" type="danger" @click="batchDeleteMessages" :disabled="!hasSelected">删除</el-button>
            </div>
            <div class="filter-right">
              <el-input 
                v-model="searchKeyword" 
                placeholder="搜索消息..." 
                prefix-icon="el-icon-search"
                clearable
                @keyup.enter="searchMessages"
                class="search-input"
              />
              <el-select v-model="timeFilter" placeholder="时间筛选" size="small" class="time-filter">
                <el-option label="全部" value="" />
                <el-option label="今天" value="today" />
                <el-option label="本周" value="week" />
                <el-option label="本月" value="month" />
              </el-select>
              <el-select v-model="statusFilter" placeholder="状态" size="small" class="status-filter">
                <el-option label="全部" value="" />
                <el-option label="已读" value="read" />
                <el-option label="未读" value="unread" />
              </el-select>
            </div>
          </div>
          
          <!-- 消息列表 -->
          <div class="message-list" v-loading="loading">
            <template v-if="messages.length > 0">
              <div 
                v-for="message in messages" 
                :key="message.id" 
                class="message-item"
                :class="{ 'unread': !message.isRead }"
              >
                <div class="message-select">
                  <el-checkbox v-model="message.selected" @change="handleItemSelectChange" />
                </div>
                <div class="message-icon" :class="getMessageTypeClass(message.type)">
                  <i :class="getMessageTypeIcon(message.type)"></i>
                </div>
                <div class="message-content" @click="viewMessage(message)">
                  <div class="message-title">
                    {{ message.title }}
                    <el-tag v-if="!message.isRead" size="mini" type="danger">未读</el-tag>
                  </div>
                  <div class="message-body">{{ message.content }}</div>
                  <div class="message-meta">
                    <span class="message-time">{{ message.time }}</span>
                    <span class="message-sender">{{ message.sender }}</span>
                  </div>
                </div>
                <div class="message-actions">
                  <el-dropdown trigger="click">
                    <el-button type="text" icon="el-icon-more"></el-button>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item icon="el-icon-view" @click="viewMessage(message)">查看</el-dropdown-item>
                        <el-dropdown-item 
                          :icon="message.isRead ? 'el-icon-reading' : 'el-icon-finished'"
                          @click="toggleReadStatus(message)"
                        >
                          {{ message.isRead ? '标为未读' : '标为已读' }}
                        </el-dropdown-item>
                        <el-dropdown-item icon="el-icon-delete" @click="handleDeleteMessage(message)">删除</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
            </template>
            <div v-else class="empty-state">
              <i class="el-icon-chat-dot-round"></i>
              <p>暂无消息</p>
              <el-button type="primary" plain @click="refreshMessages">刷新</el-button>
            </div>
            
            <!-- 分页 -->
            <div class="pagination-container">
              <el-pagination
                background
                layout="total, prev, pager, next"
                :total="totalMessages"
                :current-page="currentPage"
                :page-size="pageSize"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    
    <!-- 消息详情对话框 -->
    <el-dialog
      title="消息详情"
      v-model="dialogVisible"
      width="600px"
    >
      <div class="message-detail" v-if="currentMessage">
        <div class="detail-header">
          <h2 class="detail-title">{{ currentMessage.title }}</h2>
          <div class="detail-meta">
            <span class="detail-sender">发送人：{{ currentMessage.sender }}</span>
            <span class="detail-time">时间：{{ currentMessage.time }}</span>
          </div>
          <el-tag :type="getMessageTypeTag(currentMessage.type)" class="detail-type">
            {{ getMessageTypeName(currentMessage.type) }}
          </el-tag>
        </div>
        <div class="detail-content">
          <p>{{ currentMessage.content }}</p>
          <div v-if="currentMessage.relatedLink">
            <el-link type="primary" :href="currentMessage.relatedLink" target="_blank">查看详情</el-link>
          </div>
        </div>
        <div class="detail-attachments" v-if="currentMessage.attachments && currentMessage.attachments.length > 0">
          <h3>附件</h3>
          <ul class="attachment-list">
            <li v-for="(attachment, index) in currentMessage.attachments" :key="index" class="attachment-item">
              <i class="el-icon-document"></i>
              <span>{{ attachment.name }}</span>
              <el-button type="text" @click="downloadAttachment(attachment)">下载</el-button>
            </li>
          </ul>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button 
            v-if="currentMessage && !currentMessage.isRead" 
            @click="markCurrentAsRead"
          >标记为已读</el-button>
          <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getMessageList, getMessageDetail, markMessageRead, deleteMessage as messageDelete, getUnreadMessageCount, getMessageSetting, saveMessageSetting } from '../../api/message';

// 消息列表加载状态
const loading = ref(false);

// 当前选中的消息分类
const activeCategory = ref('all');

// 搜索和筛选条件
const searchKeyword = ref('');
const timeFilter = ref('');
const statusFilter = ref('');

// 分页参数
const currentPage = ref(1);
const pageSize = ref(10);
const totalMessages = ref(0);

// 消息列表数据
const messages = ref([]);

// 全选状态
const selectAll = ref(false);

// 是否有选择的消息
const hasSelected = computed(() => {
  return messages.value.some(item => item.selected);
});

// 消息统计
const totalCount = ref(0);
const unreadCount = ref(0);
const systemCount = ref(0);
const taskCount = ref(0);
const personalCount = ref(0);
const announcementCount = ref(0);

// 消息设置
const settings = reactive({
  receiveSystem: true,
  receiveTask: true,
  receivePersonal: true,
  receiveAnnouncement: true,
  desktopNotification: false,
  emailNotification: true,
  types: []  // 添加types数组初始化
});

// 消息详情对话框
const dialogVisible = ref(false);
const currentMessage = ref(null);

// 生命周期钩子
onMounted(() => {
  fetchMessages();
  fetchMessageCounts();
  fetchMessageSettings();
});

// 获取消息列表
const fetchMessages = async () => {
  loading.value = true;
  try {
    const params = {
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      // 消息类型映射：'all' 不传 type，其他直接传 activeCategory
      type: activeCategory.value === 'all' ? undefined : activeCategory.value,
      // 消息状态映射：'read' 对应 1，'unread' 对应 0
      status: statusFilter.value === 'read' ? 1 : (statusFilter.value === 'unread' ? 0 : undefined),
      title: searchKeyword.value.trim() || undefined,
    };
    const response = await getMessageList(params);
    
    // 处理返回数据：在模拟数据模式下，响应包含code、msg和data属性
    // 实际数据在response.data中
    const res = response.data || response;
    
    // 添加空值检查，确保res和res.list都存在
    if (res && res.list) {
      messages.value = res.list.map(item => ({ ...item, id: item.messageId, isRead: item.status === '1', selected: false }));
      totalMessages.value = res.total || 0;
    } else {
      // 如果没有数据，初始化为空数组
      messages.value = [];
      totalMessages.value = 0;
      console.warn('获取消息列表返回的数据格式不正确:', res);
    }
  } catch (error) {
    ElMessage.error('获取消息列表失败');
    console.error('获取消息列表失败:', error);
    // 出错时也初始化为空数组
    messages.value = [];
    totalMessages.value = 0;
  } finally {
    loading.value = false;
  }
};

// 获取消息统计数据
const fetchMessageCounts = async () => {
  try {
    const response = await getUnreadMessageCount();
    
    // 处理返回数据：在模拟数据模式下，响应包含code、msg和data属性
    // 实际数据在response.data中
    const res = response.data || response;
    
    // 添加空值检查
    if (res) {
      totalCount.value = res.total || 0;
      unreadCount.value = res.total || 0; // API返回的total即为未读总数，因为这里只获取未读消息数量
      systemCount.value = res.system || 0;
      taskCount.value = res.task || 0;
      announcementCount.value = res.notice || 0; // 将 notice 映射到 announcement
      personalCount.value = 0; // API未提供个人消息数量，暂时设为0
    } else {
      // 如果没有数据，全部设为0
      totalCount.value = 0;
      unreadCount.value = 0;
      systemCount.value = 0;
      taskCount.value = 0;
      announcementCount.value = 0;
      personalCount.value = 0;
      console.warn('获取消息统计返回的数据格式不正确:', res);
    }
  } catch (error) {
    ElMessage.error('获取消息统计失败');
    console.error('获取消息统计失败:', error);
    // 出错时也全部设为0
    totalCount.value = 0;
    unreadCount.value = 0;
    systemCount.value = 0;
    taskCount.value = 0;
    announcementCount.value = 0;
    personalCount.value = 0;
  }
};

// 根据消息类型获取图标
const getMessageTypeIcon = (type) => {
  const iconMap = {
    'system': 'el-icon-bell',
    'task': 'el-icon-s-order',
    'personal': 'el-icon-chat-dot-round',
    'announcement': 'el-icon-document'
  };
  return iconMap[type] || 'el-icon-message';
};

// 根据消息类型获取样式类
const getMessageTypeClass = (type) => {
  const classMap = {
    'system': 'icon-blue',
    'task': 'icon-orange',
    'personal': 'icon-green',
    'announcement': 'icon-purple'
  };
  return classMap[type] || 'icon-blue';
};

// 根据消息类型获取标签类型
const getMessageTypeTag = (type) => {
  const tagMap = {
    'system': 'primary',
    'task': 'warning',
    'personal': 'success',
    'announcement': 'info'
  };
  return tagMap[type] || 'info';
};

// 根据消息类型获取名称
const getMessageTypeName = (type) => {
  const nameMap = {
    'system': '系统通知',
    'task': '任务提醒',
    'personal': '个人消息',
    'announcement': '公告'
  };
  return nameMap[type] || '其他';
};

// 处理选中项变化
const handleItemSelectChange = () => {
  const allSelected = messages.value.every(item => item.selected);
  const someSelected = messages.value.some(item => item.selected);
  selectAll.value = allSelected ? true : someSelected ? false : false;
};

// 处理全选变化
const handleSelectAllChange = (val) => {
  messages.value.forEach(item => {
    item.selected = val;
  });
};

// 刷新消息
const refreshMessages = () => {
  currentPage.value = 1;
  fetchMessages();
  fetchMessageCounts();
};

// 批量删除消息
const batchDeleteMessages = () => {
  const selectedMessageIds = messages.value.filter(item => item.selected).map(item => item.id);
  if (selectedMessageIds.length > 0) {
    ElMessageBox.confirm(`确定要删除选中的${selectedMessageIds.length}条消息吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      try {
        const response = await messageDelete(selectedMessageIds.join(','));
        // 处理响应结构
        const res = response.data || response;
        
        if (res && res.success) {
          ElMessage.success('删除成功');
          refreshMessages(); // 刷新消息列表和统计
        } else {
          ElMessage.error('删除失败');
        }
      } catch (error) {
        ElMessage.error('删除失败');
        console.error('批量删除消息失败:', error);
      }
    }).catch(() => {});
  } else {
    ElMessage.warning('请先选择要删除的消息');
  }
};

// 标记为已读
const markAsRead = () => {
  const unreadSelectedMessageIds = messages.value.filter(item => item.selected && !item.isRead).map(item => item.id);
  if (unreadSelectedMessageIds.length > 0) {
    ElMessageBox.confirm(`确定要将选中的${unreadSelectedMessageIds.length}条消息标记为已读吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info'
    }).then(async () => {
      try {
        const response = await markMessageRead(unreadSelectedMessageIds.join(','));
        // 处理响应结构
        const res = response.data || response;
        
        if (res && res.success) {
          ElMessage.success('标记成功');
          refreshMessages(); // 刷新消息列表和统计
        } else {
          ElMessage.error('标记失败');
        }
      } catch (error) {
        ElMessage.error('标记失败');
        console.error('标记为已读失败:', error);
      }
    }).catch(() => {});
  } else {
    ElMessage.warning('没有未读的选中消息');
  }
};

// 搜索消息
const searchMessages = () => {
  if (searchKeyword.value.trim()) {
    // 在实际应用中，应调用API搜索消息
    console.log('搜索关键词:', searchKeyword.value);
    // 模拟搜索结果
    loading.value = true;
    setTimeout(() => {
      loading.value = false;
      // 这里仅作演示，实际应该调用后端API进行搜索
    }, 500);
  }
};

// 处理分类选择
const handleCategorySelect = (index) => {
  activeCategory.value = index;
  // 在实际应用中，应根据分类筛选消息列表
  console.log('选择分类:', index);
  fetchMessages();
};

// 处理分页变化
const handleCurrentChange = (page) => {
  currentPage.value = page;
  fetchMessages();
};

// 查看消息详情
const viewMessage = async (message) => {
  currentMessage.value = message;
  dialogVisible.value = true;
  
  if (!message.isRead) {
    try {
      const response = await markMessageRead(message.id.toString());
      // 处理响应结构
      const res = response.data || response;
      
      if (res && res.success) {
        // 更新本地状态
        const index = messages.value.findIndex(item => item.id === message.id);
        if (index !== -1) {
          messages.value[index].isRead = true;
        }
        message.isRead = true; // 也更新传入的对象
        ElMessage.success('消息已标记为已读');
        fetchMessageCounts(); // 刷新未读消息数量
      } else {
        ElMessage.error('标记消息为已读失败');
      }
    } catch (error) {
      ElMessage.error('标记消息为已读失败');
      console.error('标记消息为已读失败:', error);
    }
  }

  // 如果需要获取详情，使用getMessageDetail获取
  try {
    const response = await getMessageDetail(message.id);
    // 处理响应结构
    const detail = response.data || response;
    
    if (detail) {
      // 合并详情数据，保留id和isRead等UI状态属性
      currentMessage.value = { 
        ...detail, 
        id: message.id, 
        isRead: message.isRead || detail.status === '1',
        selected: message.selected 
      };
    }
  } catch (error) {
    console.error('获取消息详情失败:', error);
  }
};

// 标记当前消息为已读
const markCurrentAsRead = async () => {
  if (currentMessage.value && !currentMessage.value.isRead) {
    try {
      const response = await markMessageRead(currentMessage.value.id.toString());
      // 处理响应结构
      const res = response.data || response;
      
      if (res && res.success) {
        currentMessage.value.isRead = true;
        const index = messages.value.findIndex(item => item.id === currentMessage.value.id);
        if (index !== -1) {
          messages.value[index].isRead = true;
        }
        ElMessage.success('标记成功');
        fetchMessageCounts();
      } else {
        ElMessage.error('标记失败');
      }
    } catch (error) {
      ElMessage.error('标记失败');
      console.error('标记当前消息为已读失败:', error);
    }
  }
};

// 切换消息的已读/未读状态
const toggleReadStatus = async (message) => {
  try {
    if (message.isRead) {
      // 如果已读，尝试标记为未读（如果API支持）
      ElMessage.warning('暂不支持将已读消息标记为未读'); // 根据实际API能力调整
    } else {
      const response = await markMessageRead(message.id.toString());
      // 处理响应结构
      const res = response.data || response;
      
      if (res && res.success) {
        message.isRead = true;
        ElMessage.success('标记为已读');
        fetchMessageCounts();
      } else {
        ElMessage.error('标记失败');
      }
    }
  } catch (error) {
    ElMessage.error('操作失败');
    console.error('切换消息状态失败:', error);
  }
};

// 删除单条消息
const handleDeleteMessage = (message) => {
  ElMessageBox.confirm('确定要删除此消息吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      const response = await messageDelete(message.id.toString());
      // 处理响应结构
      const res = response.data || response;
      
      if (res && res.success) {
        ElMessage.success('删除成功');
        refreshMessages(); // 刷新消息列表和统计
      } else {
        ElMessage.error('删除失败');
      }
    } catch (error) {
      ElMessage.error('删除失败');
      console.error('删除单条消息失败:', error);
    }
  }).catch(() => {});
};

// 下载附件
const downloadAttachment = (attachment) => {
  console.log('下载附件:', attachment);
  // 在实际应用中，应调用API下载附件
  ElMessage.success(`正在下载 ${attachment.name}`);
};

// 获取消息设置
const fetchMessageSettings = async () => {
  try {
    const response = await getMessageSetting();
    
    // 处理返回数据：在模拟数据模式下，响应包含code、msg和data属性
    // 实际数据在response.data中
    const res = response.data || response;
    
    // 确保 res 存在，否则使用默认值
    if (res) {
      // 确保 res.types 存在，否则使用空数组
      const types = res.types || [];
      
      // 使用可空链操作符和默认值
      settings.receiveSystem = types.find(t => t.type === 'system')?.appNotify || false;
      settings.receiveTask = types.find(t => t.type === 'task')?.appNotify || false;
      settings.receivePersonal = types.find(t => t.type === 'personal')?.appNotify || false;
      settings.receiveAnnouncement = types.find(t => t.type === 'notice')?.appNotify || false; // notice 映射到 announcement
      settings.desktopNotification = res.appNotify || false; // 假设appNotify代表桌面通知
      settings.emailNotification = res.emailNotify || false;
      settings.types = types; // 保存类型数组
    } else {
      console.warn('获取消息设置返回的数据格式不正确:', res);
      // 设置默认值
      settings.receiveSystem = false;
      settings.receiveTask = false;
      settings.receivePersonal = false;
      settings.receiveAnnouncement = false;
      settings.desktopNotification = false;
      settings.emailNotification = false;
      settings.types = [];
    }
  } catch (error) {
    ElMessage.error('获取消息设置失败');
    console.error('获取消息设置失败:', error);
    // 出错时设置默认值
    settings.receiveSystem = false;
    settings.receiveTask = false;
    settings.receivePersonal = false;
    settings.receiveAnnouncement = false;
    settings.desktopNotification = false;
    settings.emailNotification = false;
    settings.types = [];
  }
};

// 保存消息设置
const saveSettings = async () => {
  try {
    const params = {
      emailNotify: settings.emailNotification,
      smsNotify: false, // 假设没有短信通知设置
      appNotify: settings.desktopNotification, // 假设桌面通知对应appNotify
      types: [
        { 
          type: 'system', 
          name: '系统消息',
          appNotify: settings.receiveSystem,
          emailNotify: settings.emailNotification,
          smsNotify: false
        },
        { 
          type: 'task', 
          name: '任务消息',
          appNotify: settings.receiveTask,
          emailNotify: settings.emailNotification,
          smsNotify: false
        },
        { 
          type: 'personal', 
          name: '个人消息',
          appNotify: settings.receivePersonal,
          emailNotify: settings.emailNotification,
          smsNotify: false
        },
        { 
          type: 'notice', 
          name: '公告',
          appNotify: settings.receiveAnnouncement,
          emailNotify: settings.emailNotification,
          smsNotify: false
        }
      ]
    };
    
    const response = await saveMessageSetting(params);
    // 处理响应结构
    const res = response.data || response;
    
    if (res && res.success) {
      ElMessage.success('设置已保存');
    } else {
      ElMessage.error('保存消息设置失败');
    }
  } catch (error) {
    ElMessage.error('保存消息设置失败');
    console.error('保存消息设置失败:', error);
  }
};
</script>

<style scoped>
.message-container {
  padding: 20px;
}

/* 标题区域 */
.message-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  color: var(--dark-color);
}

.page-subtitle {
  color: #666;
  margin: 5px 0 0;
}

/* 消息主体 */
.message-main {
  margin-bottom: 30px;
}

/* 消息侧栏 */
.message-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.message-stats {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  justify-content: space-around;
  box-shadow: var(--card-shadow);
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: var(--primary-color);
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.message-categories, .message-settings {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: var(--card-shadow);
}

.sidebar-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.category-menu {
  border-right: none;
}

.message-count {
  float: right;
  background-color: #f5f7fa;
  color: #909399;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.setting-item span {
  color: #333;
  font-size: 14px;
}

/* 消息筛选 */
.message-filter {
  background-color: white;
  border-radius: 8px;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  box-shadow: var(--card-shadow);
}

.filter-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-input {
  width: 200px;
}

.time-filter, .status-filter {
  width: 100px;
}

/* 消息列表 */
.message-list {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  min-height: 500px;
  box-shadow: var(--card-shadow);
}

.message-item {
  display: flex;
  align-items: flex-start;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.3s;
}

.message-item:hover {
  background-color: #f8f8f8;
}

.message-item.unread {
  background-color: #f0f7ff;
}

.message-item.unread:hover {
  background-color: #e8f2ff;
}

.message-select {
  margin-right: 15px;
  padding-top: 3px;
}

.message-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
}

.message-icon i {
  font-size: 20px;
  color: white;
}

.icon-blue {
  background: linear-gradient(135deg, #3E78B2, #4ECDC4);
}

.icon-orange {
  background: linear-gradient(135deg, #FF9A76, #FF5E62);
}

.icon-green {
  background: linear-gradient(135deg, #4CAF50, #8BC34A);
}

.icon-purple {
  background: linear-gradient(135deg, #9C27B0, #673AB7);
}

.message-content {
  flex-grow: 1;
  cursor: pointer;
}

.message-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}

.message-title .el-tag {
  margin-left: 8px;
}

.message-body {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.message-meta {
  font-size: 12px;
  color: #999;
}

.message-time {
  margin-right: 15px;
}

.message-actions {
  margin-left: 10px;
}

/* 空状态 */
.empty-state {
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #909399;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 20px;
}

/* 分页容器 */
.pagination-container {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

/* 消息详情对话框 */
.message-detail {
  padding: 10px;
}

.detail-header {
  margin-bottom: 20px;
  position: relative;
}

.detail-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 10px;
}

.detail-meta {
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
}

.detail-sender {
  margin-right: 20px;
}

.detail-type {
  position: absolute;
  top: 0;
  right: 0;
}

.detail-content {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 20px;
  word-break: break-word;
}

.detail-attachments h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 10px;
}

.attachment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.attachment-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed #eee;
}

.attachment-item i {
  margin-right: 8px;
  color: #909399;
}

.attachment-item span {
  flex-grow: 1;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .message-filter {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .filter-right {
    margin-top: 15px;
    width: 100%;
  }
  
  .search-input, .time-filter, .status-filter {
    margin-bottom: 10px;
    width: 100%;
  }
}
</style>